<template>
  <div class="rightbox" v-cloak>
    <h1>日志管理</h1>
    <el-row style="width: 96%;margin:2%">
      <div style="width:150px;float:left;">
        <el-select v-model="type" clearable placeholder="请选择用户类型" @change="changetype">
          <el-option label="普通用户" value="0"></el-option>
          <el-option label="公司用户" value="1"></el-option>
          <el-option label="系统用户" value="2"></el-option>
        </el-select>
      </div>
      <div style="margin-left:10px;width:150px;float:left;">
        <el-select v-model="userindex" clearable placeholder="请选择用户">
          <el-option v-for="(item, index) in userList" :key="index" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </div>
      <div style="margin-left:10px;float:left;">
        <el-date-picker
          style="width:150px;"
          v-model="starttime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期">
        </el-date-picker>
      </div>
      <div style="margin-left:10px;width:150px;float:left;">
        <el-date-picker
          style="width:150px;"
          v-model="endtime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期">
        </el-date-picker>
      </div>
      <div style="margin-left:10px;float:left;">
        <el-button type="primary" @click="Search">查询</el-button>
      </div>
    </el-row>
    <el-table
    :data="dataList"
    border
    style="width: 96%;margin:2%">
      <el-table-column
        prop="userName"
        label="用户名称">
      </el-table-column>
      <el-table-column
        prop="loginfoip"
        label="IP">
      </el-table-column>
      <el-table-column
        prop="describe"
        label="操作">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="详情">
      </el-table-column>
      <el-table-column
        prop="createtime"
        label="时间">
      </el-table-column>
    </el-table>
    <div class="page" v-if="total >= 20">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pagelimit"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [],
      userList: [],
      userindex: '',
      starttime: '',
      endtime: '',
      pagelimit: 20,
      pageindex: 0,
      total: '',
      type: '0'
    }
  },
  methods: {
    changetype () {
      this.userList = []
      this.userindex = ''
      this.getData()
    },
    getData: function () {
      var that = this
      that.$axios.request('post', '/Loginfo/Index', {
        type: that.type
      })
        .then((res) => {
          if (res.code === 0) {
            that.userList = res.data.userList
          }
        })
    },
    Search: function () {
      var that = this
      that.getList()
    },
    getList: function () {
      var that = this
      that.$axios.request('post', '/Loginfo/GetList', {
        starttime: that.starttime,
        endtime: that.endtime,
        type: that.type,
        userindex: that.userindex,
        pagelimit: that.pagelimit,
        pageindex: that.pageindex
      })
        .then((res) => {
          if (res.code === 0) {
            that.dataList = res.data.datalist
            that.total = res.data.total
          }
        })
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getList()
    }
  },
  mounted () {
    this.changetype()
  }
}
</script>
